<div class="welcome">
        欢迎您 <span class="name">--</span>，祝您好运！&nbsp;&nbsp;
        账号余额：<span class="value balance">0.00</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        未结余额：<span class="value weijie">0.00</span>
    </div>
</div>

<div class="disable">充值暂时关闭！</div>

<div class="charge-c">
    <div class="steps-img">
        <div class="s">
            <img src="../public/all/images/charge_step_line.jpg"/>
            <div>01 选择支付模式</div>
        </div>
        
        <div class="s">
            <img src="../public/all/images/charge_step_line.jpg"/>
            <div>02 填写金额</div>
        </div>

        <div class="s">
            <img src="../public/all/images/charge_step_line.jpg"/>
            <div>03 选择银行</div>
        </div>

        <div class="s">
            <img src="../public/all/images/charge_step_line.jpg"/>
            <div>04 充值到账</div>
        </div>
    </div>

    <div class="charge-type">
        <div class="t">充值模式：</div>
        <button class="bank">网银转账</button>
        <button class="alipay">支付宝转账</button>
        <button class="wechat">微信转账</button>
        <button class="thh">Mo宝支付</button>
    </div>

    <div class="img">
        <img src="../public/all/images/charge_step_alipay.jpg"/>
    </div>

    <div class="charge-detail"></div>

    <button class="center-form-button btn-next">下一步</button>
</div>


<style type="text/css">
    .welcome {
        color: #5f4439;
        font-size: 16px;
        line-height: 46px;
        background-color: #ffd101;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        padding-left: 20px;
    }
    .welcome .name, .welcome .balance, .welcome .weijie{
        color: red;
    }
</style>

<style type="text/css">
.charge-c {
    padding-left: 25px;
}
.charge-c .steps-img {
    padding-top: 20px;
    text-align: center;
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
}
.charge-c .steps-img .s {
    display: inline-block;
    width: 190px;
    text-align: center;
    font-size: 14px;
}
.charge-c .steps-img .s div {
    line-height: 30px;
}
.charge-type {
    padding: 20px 0px 10px 15px;
}
.charge-type div, .charge-type button {
    display: inline-block;
    margin-left: 10px;
}
.charge-type .t {
    color: #000;
    font-weight: bold;
}
.charge-type button {
    background-color: #f4f4f4;
    border: 1px solid #ccc;
    border-radius: 4px;
    line-height: 28px;
    padding: 0px 10px 0px 10px;
    font-size: 16px;
}
.charge-type button.active {
    background-color: #ffd100;
    color: #000;
}
.img {
    padding: 10px 0px 0px 20px;
}
.charge-detail {
    margin-left: 20px;
    border-top: 1px solid #ccc;
    margin-bottom: 15px;
    margin-top: 20px;
}

.disable {
    text-align: center;
    font-size: 18px;
    line-height: 80px;
    color: red;
    display: none;
}

.btn-next {
    margin-bottom: 30px;
}
</style>

<script>
    $(".charge-c").hide();
    $(".charge-type button").hide();

    var _queryChargeType = function(type, button) {
        var grade = context.user.user.grade || 1;
        grade = grade + '';

        Classify.queryExt("money", type, true, [], function(r) {
            for (var i in r) {
                if (r[i].enable != 1) continue;
                if (r[i].layer.indexOf(grade) == -1) continue;
                $("button." + button).show();
                break;
            }
            _setActiveButton();
        });
    };
    var _hadSet = false;
    var _setActiveButton = function() {
        if (_hadSet) return;
        var type = urlInfo.params.type || 'bank';
        var arr = $(".charge-type button");
        for (var i = 0; i < arr.length; i++) {
            var c = $(arr[i]).attr("class");
            if (c == type && $(arr[i]).is(":hidden")) {
                return;
            }
            if (c == type) {
                $(arr[i]).attr("class", "active " + type);
                _hadSet = true;

                // 载入页面
                switch_page("center/charge/" + type, $(".charge-detail"));
                break;
            }
        }
    }

    Classify.query("settings", "charge_enable", false, "1", function(v) {
        if (v == '0') {
            $(".charge-c .disable").show();
            return;
        }
        $(".charge-c").show();
        
        ME.query(function() {
            $(".welcome .name").html(context.user.user.mobile || '游客');
            $(".welcome .balance").html(context.user.balance/100);
            $(".welcome .weijie").html(context.user.pending/100);

            _queryChargeType("banks", "bank");
            _queryChargeType("alipay", "alipay");
            _queryChargeType("wechat", "wechat");

            // Mobao支付
            queryMoBao();
        });
    });

    $(".charge-type button").click(function(e) {
        var c = $(e.currentTarget).attr("class");
        if (c.indexOf("active") != -1) return;

        Util.jumpUrl({
            type: c,
        });
    });

    function queryMoBao() {
        var grade = context.user.user.grade || 1;
        grade = grade + '';

        Classify.query("eddy.pay.thh", 'enable', false, '0', function(r) {
            if (r != '1') {
                _setActiveButton();
                return;
            }
            
            Classify.query("eddy.pay.thh", 'groups', true, [], function(r) {
                if (r.indexOf(grade) != -1) $("button.thh").show();
                _setActiveButton();
            });
        });
    }
</script>